<template>
	<view class="">
		<view class="content" v-if="hmPageDisp">
			<u-subsection
				:list="list"
				:current="curNow"
				@change="sectionChange"
				mode="subsection"
				active-color="#5A1524"
				:animation="true"
				v-if="flag"
			></u-subsection>

			<view class="anni" v-if="curNow == 0">
				<view v-for="(item, index) in data" :key="index">
					<view class="list" @click="details(item.article_id)">
						<view class="info">
							<text class="text">{{ item.post_title }}</text>
							<text class="text1">{{ item.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item.post_source }}</text>
						<view class="info1 u-line-1">{{ item.post_excerpt }}</view>
						<view
							class="image"
							v-if="item.thumbnail"
							:style="[
								{
									background: `url(${item.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
			<view class="anni" v-if="curNow == 1">
				<view v-for="(item1, index1) in data1" :key="index1">
					<view class="list" @click="details(item1.article_id)">
						<view class="info">
							<text class="text">{{ item1.post_title }}</text>
							<text class="text1">{{ item1.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item1.post_source }}</text>
						<view class="info1 u-line-2">{{ item1.post_excerpt }}</view>
						<view
							class="image"
							v-if="item1.thumbnail"
							:style="[
								{
									background: `url(${item1.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
			<view class="anni" v-if="curNow == 2">
				<view v-for="(item2, index2) in data2" :key="index2">
					<view class="list" @click="details(item2.article_id)">
						<view class="info">
							<text class="text">{{ item2.post_title }}</text>
							<text class="text1">{{ item2.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item2.post_source }}</text>
						<view class="info1 u-line-2">{{ item2.post_excerpt }}</view>
						<view
							class="image"
							v-if="item2.thumbnail"
							:style="[
								{
									background: `url(${item2.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
		</view>
		<view class="content" v-else>
			<u-subsection
				:list="list1"
				:current="curNow"
				@change="sectionChange"
				mode="subsection"
				active-color="#5A1524"
				:animation="true"
			></u-subsection>
			<view class="anni" v-if="curNow == 0" @click="denglu">
				<view v-for="(item, index) in diyi" :key="index">
					<view class="list" @click="details(item.article_id)">
						<view class="info">
							<text class="text">{{ item.post_title }}</text>
							<text class="text1">{{ item.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item.post_source }}</text>
						<view class="info1 u-line-1">{{ item.post_excerpt }}</view>
						<view
							class="image"
							v-if="item.thumbnail"
							:style="[
								{
									background: `url(${item.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
			<view class="anni" v-if="curNow == 1" @click="denglu">
				<view v-for="(item1, index1) in dier" :key="index1">
					<view class="list" @click="details(item1.article_id)">
						<view class="info">
							<text class="text">{{ item1.post_title }}</text>
							<text class="text1">{{ item1.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item1.post_source }}</text>
						<view class="info1 u-line-2">{{ item1.post_excerpt }}</view>
						<view
							class="image"
							v-if="item1.thumbnail"
							:style="[
								{
									background: `url(${item1.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
			<view class="anni" v-if="curNow == 2" @click="denglu">
				<view v-for="(item2, index2) in disan" :key="index2">
					<view class="list" @click="details(item2.article_id)">
						<view class="info">
							<text class="text">{{ item2.post_title }}</text>
							<text class="text1">{{ item2.is_study === 1 ? '已学习' : '未学习' }}</text>
						</view>
						<text class="text11">{{ item2.post_source }}</text>
						<view class="info1 u-line-2">{{ item2.post_excerpt }}</view>
						<view
							class="image"
							v-if="item2.thumbnail"
							:style="[
								{
									background: `url(${item2.thumbnail}) no-repeat center`,
								},
								{ backgroundSize: 'cover' },
							]"
						></view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	onShareTimeline() {
		
	},
	data() {
		return {
			list1: [
				{
					name: '月嫂技能',
					id: '',
				},
				{
					name: '月嫂新闻',
					id: '',
				},
				{
					name: '公司政策',
					id: '',
				},
			],
			list: [
				{
					name: '',
					id: '',
				},
				{
					name: '',
					id: '',
				},
				{
					name: '',
					id: '',
				},
			],
			curNow: 0,
			page: 1, //页码
			pagesize: 10, //每页展示条数
			cate_id: 0, //分类id
			flag: false,
			data: [],
			data1: [],
			data2: [],
			hmPageDisp: true,
			diyi: [],
			dier: [],
			disan: [],
		};
	},
	methods: {
		//未登录 资讯列表接口
		async notLoggedIn() {
			const res = await this.$u.get('api/Home/informate_list', {
				cate_id: '11',
			});
			this.diyi = res.data;
		},
		//未登录 资讯列表接口
		async notLoggedIn1() {
			const res = await this.$u.get('api/Home/informate_list', {
				cate_id: '26',
			});
			this.dier = res.data;
		},
		//未登录 资讯列表接口
		async notLoggedIn2() {
			const res = await this.$u.get('api/Home/informate_list', {
				cate_id: '1',
			});
			this.disan = res.data;
		},
		// 挑战详情页
		details(id) {
			console.log('id :>> ', id);
			uni.navigateTo({
				url: './xiangqing/xiangqing?id=' + id,
			});
		},
		async sectionChange(index) {
			console.log('index :>> ', index);
			this.curNow = index;
			if (index === 0) {
				var cate_id = [this.list[0].id, this.list[1].id, this.list[2].id];
				const res = await this.$u.post(
					'/api/Allnews/informate_list',
					{ cate_id: cate_id[index] },
					{
						'XX-Token': uni.getStorageSync('token'),
						'XX-Device-Type': 'wxapp',
					},
				);
				console.log('res000 >>  ', res);
				if (res.code === 0) return uni.$showMsg(res.msg);
				if (res.code === 1) return (this.data = res.data);
			} else if (index === 1) {
				var cate_id = [this.list[0].id, this.list[1].id, this.list[2].id];
				const res = await this.$u.post(
					'/api/Allnews/informate_list',
					{ cate_id: cate_id[index] },
					{
						'XX-Token': uni.getStorageSync('token'),
						'XX-Device-Type': 'wxapp',
					},
				);
				console.log('res111>> ', res);
				if (res.code === 0) return uni.$showMsg(res.msg);
				if (res.code === 1) return (this.data1 = res.data);
			} else if (index === 2) {
				var cate_id = [this.list[0].id, this.list[1].id, this.list[2].id];
				const res = await this.$u.post(
					'/api/Allnews/informate_list',
					{ cate_id: cate_id[index] },
					{
						'XX-Token': uni.getStorageSync('token'),
						'XX-Device-Type': 'wxapp',
					},
				);
				console.log('res222 >>  ', res);
				if (res.code === 0) return uni.$showMsg(res.msg);
				if (res.code === 1) return (this.data2 = res.data);
			}
		},
		//文章分类
		async getInfo() {
			const res = await this.$u.get(
				'/api/Home/article_cateslist',
				{},
				{
					'XX-Device-Type': 'wxapp',
				},
			);

			res.data.map((e, i) => {
				this.$set(this.list, i, {
					name: e.name,
					id: e.id,
				});
			});
			this.$forceUpdate();
			this.flag = true;
			this.qiehuan();
		},
		//首页资讯列表
		async qiehuan() {
			console.log('this.list[0].id :>> ', this.list[0].id);
			const res = await this.$u.post(
				'/api/Allnews/informate_list',
				{ cate_id: this.list[0].id },
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			this.$forceUpdate();
			console.log('首页资讯列表 >>  ', res);
			this.data = res.data;
			if (res.code === 0) return uni.$showMsg(res.msg);
		},
		//上下级关系绑定
		async relationshipBinding() {
			console.log('进入 :>> ');
			const res = await this.$u.post(
				'api/User/user_relation',
				{
					user_id: uni.getStorageSync('user').id,
					agentid: uni.getStorageSync('agentid'),
				},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('上下级关系绑定 :>> ', res);
		},
		denglu() {
			
			uni.reLaunch({
				url: '../login/login',
			});
		},
		//个人中心（用户基础数据）
		async personalCtr() {
			const res = await this.$u.post(
				'/api/User/userinfo',
				{},
				{
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'wxapp',
				},
			);
			console.log('用户基础数据 >>  ', res);
			this.data = res.data;
			uni.setStorageSync('user_invitestr',res.data.user_invitestr);
			uni.setStorageSync('id',res.data.id);
			
		},
	},
	onLoad(e) {
		if (e.user_id) {
			uni.setStorageSync('agentid', e.user_id);
		}
		try {
			const token = uni.getStorageSync('token');
			
			if (token) {
				this.relationshipBinding();
				this.getInfo();
				this.personalCtr()
			} else {
				this.hmPageDisp = false;
				this.notLoggedIn();
				this.notLoggedIn1();
				this.notLoggedIn2();
			}
		} catch (e) {}
	},
	onShow() {
		this.getInfo();
	},
};
</script>

<style lang="scss">
.content {
	width: 100vw;
	height: 100vh;
	overflow: scroll;
	.u-subsection {
		width: 540rpx !important;
		height: 70rpx !important;
		margin: 30rpx auto !important;
		overflow: hidden;
		border: 3rpx solid #5a1524;
		border-radius: 35rpx !important;
		box-sizing: border-box;
		.u-item {
			border-color: #ffffff !important ;
			border-width: 0rpx !important;
			border-style: none !important;
		}
		.u-item-bg {
			width: 180rpx !important;
		}
	}
	.anni {
		//background-color: #f8f8f8;
		padding: 30rpx;
		height: 100vh;
		.list {
			display: flex;
			flex-direction: column;
			margin-bottom: 20rpx;

			padding: 30rpx 22rpx;
			width: 690rpx;
			//height: 532rpx;
			background: #ffffff;
			border-radius: 20rpx;
			.info {
				display: flex;
				justify-content: space-between;
				.text {
					width: calc(100%-101rpx);
					// height: 30rpx;
					line-height: 30rpx;
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: bold;
					color: #1a1a1a;
					line-height: 40rpx;
				}
				.text1 {
					width: 101rpx;
					height: 30rpx;
					background: #fdebe0;
					text-align: center;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #5a1524;
					line-height: 30rpx;
					margin-right: -22rpx;
				}
			}
			.text11 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
				line-height: 27rpx;
				margin-top: 24rpx;
				margin-bottom: 12rpx;
			}
			.info1 {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 30rpx;
			}
			.image {
				width: 650rpx;
				height: 300rpx;
				border-radius: 20rpx;
				margin-top: 19rpx;
				image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}
}
</style>
